import { clsx } from "clsx"
import { JSX } from "react"

type IInfoItem = {
    children?: JSX.Element[] | JSX.Element;
    boxClass?: string
    name?: string
    value?: string | number
}

function InfoItem({ children, boxClass, name, value }: IInfoItem) {
    return (
        <>
            <div
                className={
                    clsx(`flex 
                        h-[88px] 
                        leading-[88px]
                        bg-white 
                        w-[100%] 
                        pl-[24px] 
                        pr-[67px]`,
                        boxClass)}
                style={{ borderBottom: '1px solid #E7EBEF ' }}
            >
                {children && children}
                {name && <p
                    className="w-[228px] shrink-0"
                    style={{ color: "#999999" }}
                >
                    {name}
                </p>}
                {value === undefined || null ? !children && <div
                    className="skeleton h-[100%] flex-1"
                ></div> : <p
                    className="overflow-hidden"
                    style={{ color: "#000000" }}>
                    {value}
                </p>}
            </div>
        </>
    )
}
export default InfoItem